<template>
  <div class="">
    <el-form :inline="true">
      <div style="display: flex; justify-content: space-between;">
        <div>
          <el-form-item>
            <el-input v-model="authname" clearable :placeholder="tag == 0 ? '请输入模块名称' : '请输入菜单名称'" style="width: 200px;" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getData">查询</el-button>
          </el-form-item>
        </div>
        <div>
          <el-form-item>
            <el-button type="primary" @click="onVisible(1)">新增{{ tag == 0 ? '模块' : '菜单' }}权限</el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <el-tabs type="border-card" @tab-click="tanleChange">
      <el-tab-pane label="模块权限">
        <el-table v-loading="listLoading" :data="tableData" border style="width: 100%">
          <el-table-column prop="id" label="ID" width="60" align="center" />
          <el-table-column prop="pid" :label="tag == 0 ? '所属模块' : '父级菜单'" width="100px" align="center" />
          <el-table-column prop="authname" :label="tag == 0 ? '模块名称' : '菜单名称'" align="center" />
          <el-table-column prop="url" label="模块权限" align="center" />
          <el-table-column prop="valid" label="状态" width="100" align="center">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.valid" :active-value="1" :inactive-value="0"
                @change="(val) => { return SetValid(val, scope.row) }" />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="160px" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="onVisible(2, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="onDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="菜单权限">
        <el-table v-loading="listLoading" :data="tableData" :row-class-name="tableRowClassName" border
          style="width: 100%">
          <el-table-column prop="id" label="ID" width="60" align="center" />
          <el-table-column prop="pid" label="父级菜单" width="100px" align="center" />
          <el-table-column prop="authname" label="菜单名称" align="center" />
          <!-- <el-table-column prop="icon" label="图标" align="center" /> -->
          <el-table-column prop="acode" label="菜单权限" align="center" />
          <el-table-column prop="isShow" label="显示菜单" width="100" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.isShow == 0" type="danger">关闭</el-tag>
              <el-tag v-else type="success">显示</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="160px" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="onVisible(2, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="onDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <div class="block " style="padding-top: 20px;">
      <el-pagination background :current-page="PageIndex" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="totalCount" @size-change="idx => { pageSize = idx }"
        @current-change="idx => { PageIndex = idx }" />
    </div>
    <!-- 接口 -->
    <el-dialog :close-on-click-modal="false" :title="visibleType == '1' ? '新增菜单' : '修改菜单'" :visible.sync="dialogVisible"
      @closed="handleClose">
      <el-form ref="forms" :rules="rulesModel" :model="form" label-width="80px">
        <div class="flex" style="display: flex;">
          <el-form-item label="所属模块" prop="pid">
            <!-- <el-input v-model.number="form.pid" :disabled="visibleType=='2'"></el-input> -->
            <el-select v-model="form.pid" placeholder="请选择" :disabled="form.pid == 0 && visibleType == '2'">
              <el-option v-for="item in ModelPidList" :key="item.id" :label="item.authname" :value="item.id" />
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="菜单名称" prop="authname">
          <el-input v-model="form.authname" :rows="2" placeholder="请输入菜单名称" />
        </el-form-item>
        <!-- 接口权限 -->
        <el-form-item label="url" prop="url">
          <el-input v-model="form.url" :rows="2" placeholder="接口地址权限" />
        </el-form-item>
        <el-form-item label="状态" prop="valid">
          <el-switch v-model="form.valid" :active-value="1" :inactive-value="0" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onEdit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 菜单 -->
    <el-dialog :close-on-click-modal="false" :title="visibleType == '1' ? '新增菜单' : '修改菜单'" :visible.sync="dialogVisible1"
      @closed="handleClose">
      <el-form ref="forms1" :rules="rulesMenu" :model="form" label-width="80px">
        <div class="flex" style="display: flex;">
          <el-form-item label="父级菜单" prop="pid">
            <!-- <el-input v-model.number="form.pid" :disabled="visibleType=='2'"></el-input> -->
            <el-select v-model="form.pid" placeholder="请选择" :disabled="form.pid == 0 && visibleType == '2'">
              <el-option :key="0" label="一级菜单" :value="0" />
              <el-option v-for="item in PidList" :key="item.id" :label="item.authname" :value="item.id" />
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="菜单名称" prop="authname">
          <el-input v-model="form.authname" :rows="2" placeholder="请输入菜单名称" />
        </el-form-item>
        <!-- 菜单权限 -->
        <!-- <el-form-item label="图标" prop='icon'>
           <el-input :rows="2" placeholder="请输入图标" v-model="form.icon"></el-input>
         </el-form-item> -->
        <el-form-item label="acode" prop="acode">
          <el-input v-model="form.acode" :rows="2" placeholder="菜单权限" />
        </el-form-item>
        <el-form-item label="是否显示" prop="isShow">
          <el-switch v-model="form.isShow" :active-value="1" :inactive-value="0" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="onEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { GetPage_Auth, AddEdit_Auth, Delete_Auth, SetValid_Auth } from '@/api/sys.js'
export default {
  name: 'Name',
  data() {
    return {
      tag: 0, // 标签卡
      form: {},
      authname: '',
      ModelPidList: [], // 所属模块
      PidList: [], // 父级菜单
      listLoading: false,
      tableData: [],
      totalCount: 0,
      PageIndex: 1,
      pageSize: 10,
      dialogVisible: false,
      dialogVisible1: false,
      visibleType: '',
      rulesModel: {
        pid: [
          { required: true, message: '请选择所属模块', trigger: 'blur' }
        ],
        authname: [
          { required: true, message: '请输入模块名称', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '请输入模块权限名称', trigger: 'blur' }
        ]
      },
      rulesMenu: {
        pid: [
          { required: true, message: '请选择父级菜单', trigger: 'blur' }
        ],
        authname: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' }
        ],
        acode: [
          { required: true, message: '请输入菜单权限名称', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  watch: {
    PageIndex(val) {
      this.getData()
    },
    pageSize(val) {
      this.getData()
    }
  },
  mounted() {
    this.getData()
    setTimeout(() => {
      this.getPid()
    }, 500)
  },
  methods: {
    setFrom() {
      this.form = {
        tag: this.tag,
        id: 0,
        pid: '',
        url: '',
        authname: '',
        // icon: '',
        acode: '',
        valid: 1,
        isShow: 1
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.pid == 0) {
        return 'warning-row'
      }
      return ''
    },
    tanleChange(val) {
      this.tag = val.index
      this.PageIndex = 1
      this.getData()
    },
    // 状态
    async SetValid(val, item) {
      const { success, msg } = await SetValid_Auth({
        id: item.id,
        valid: val
      })
      if (success) {
        this.getData()
      }
      this.$message({
        message: msg,
        type: success ? 'success' : 'error'
      })
    },
    async getPid() {
      const { list } = await GetPage_Auth({
        PageIndex: 1,
        PageSize: 10000
      })
      this.ModelPidList = list.filter(item => {
        return item.tag == 1
      })
      this.PidList = list.filter(item => {
        return item.pid == 0
      })
      // console.log(this.PidList)
    },
    async onDelete(item) {
      try {
        const confirm = await this.$confirm('此操作将删除该配置, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        if (confirm == 'confirm') {
          const { success, msg } = await Delete_Auth([item.id])
          this.getData()
          this.$message({
            message: msg,
            type: success ? 'success' : 'error'
          })
        }
      } catch (e) {
        // 取消
        console.log(e)
      }
    },
    onEdit() {
      let froms
      if (this.tag == 0) {
        froms = this.$refs['forms']
      } else {
        froms = this.$refs['forms1']
      }
      froms.validate(async (valid) => {
        if (valid) {
          this.form.parameter = this.form.parameter || ''
          this.form.tag = this.tag
          const { success, msg } = await AddEdit_Auth(this.form)
          if (success) {
            this.dialogVisible = false
            this.dialogVisible1 = false
            this.getData()
          }
          this.$message({
            message: msg,
            type: success ? 'success' : 'error'
          })
        } else {
          return false
        }
      })
    },
    // 关闭前
    handleClose() {
      if (this.tag == 0) {
        this.$refs.forms.resetFields()
        this.$refs.forms.clearValidate()
      } else {
        this.$refs.forms1.resetFields()
        this.$refs.forms1.clearValidate()
      }
    },
    // 打开前
    onVisible(type, item = {}) {
      this.visibleType = type
      this.setFrom()
      this.form = { ...this.form, ...item }
      if (this.tag == 0) {
        this.dialogVisible = true
      } else {
        this.dialogVisible1 = true
      }
    },
    async getData(address) {
      this.listLoading = true
      const { list, pageIndex, totalCount } = await GetPage_Auth({
        authname: this.authname,
        tag: this.tag,
        PageIndex: this.PageIndex,
        PageSize: 10
      })
      this.totalCount = totalCount
      this.tableData = list
      this.listLoading = false
    }
  }
}
</script>

<style lang="scss" scoped></style>
<style lang="scss">
.el-table .warning-row {
  background: oldlace;
}
</style>
